<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- JSTL表达式（判断，循环，输出） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%-- 方法表达式（字符串截取，替换） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="<%=basePath%>css/amazeui.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/wap.css?2">
    <title>文章列表页</title>
</head>
<body>
<%--<div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
    <a href="#top" title="">
        <img class="am-gotop-icon-custom" src="img/goTop.png" />
    </a>
</div>--%>

<div class="pet_mian" id="top">
    <div class="pet_head">
        <header data-am-widget="header"
                class="am-header am-header-default pet_head_block">
            <div class="am-header-left am-header-nav ">
                <a href="javascript:window.history.go(-1)" class="iconfont pet_head_jt_ico">&#xe601;</a>
            </div>
            <div class="pet_news_list_tag_name">文章</div>
            <%--<div class="am-header-right am-header-nav">
              <a href="javascript:;" class="iconfont pet_head_gd_ico">&#xe600;</a>
            </div>--%>
        </header>
    </div>

<div style="padding-top: 60px;">
    <img src="<%=basePath%>img/article.png" style="width: 100%; height: 100%;">
</div>

<div class="pet_content_main" style="padding-top: 0px;">
  <div data-am-widget="list_news" class="am-list-news am-list-news-default" >
  <div class="am-list-news-bd">
  <ul class="am-list" id="articles">

  </ul>
  <div style="text-align: center; padding: 10px; font-size: 1.2rem;">
      <a class="pet_article_dowload_Pg" href="javascript:;" onclick="load()" id="loadArticles">加载更多</a>
  </div>

  </div></div></div>
</div>

<jsp:include page="common.jsp">
    <jsp:param name="active" value="list" />
</jsp:include>

<script src="<%=basePath%>js/jquery.min.js"></script>
<script src="<%=basePath%>js/amazeui.min.js"></script>
<script>
$(function(){

    // 动态计算文章列表文字样式
    auto_resize();
    $(window).resize(function() {
        auto_resize();
    });
    $('.am-list-thumb img').load(function(){
        auto_resize();
    });

    $('.am-list > li:last-child').css('border','none');
    function auto_resize(){
        $('.pet_list_one_nr').height($('.pet_list_one_img').height());

    }
        $('.pet_nav_gengduo').on('click',function(){
            $('.pet_more_list').addClass('pet_more_list_show');
       });
        $('.pet_more_close').on('click',function(){
            $('.pet_more_list').removeClass('pet_more_list_show');
        });
});
    var page = 0;

    load();

    function load(){
        page++;
        $.post("<%=basePath%>article/getArticles", {page: page}, function(res){
            $("#articles").append(res);
        }, 'html');
    }
</script>
</body>
</html>